<template>
  <div class="main">
    <div class="step flex">
      <div class="left font-14">合作阶段</div>
      <div v-for="(item, index) in stepList" :key="index" class="content flex-between flex-align-items-center pointer"
        @click="info.cooperateStage = item.step">
        <div class="content-left">
          <p class="item-desc font-12">{{ item.desc }}</p>
          <p class="item-name font-14">{{ item.name }}</p>
        </div>
        <i class="iconfont icon-duigou" :class="{ active: info.cooperateStage >= item.step }"></i>
      </div>
    </div>

    <div class="bloger-card flex-between">
      <div class="left flex">
        <div class="card-avatar">
          <img :src="info.influencer.avatar">
          <span class="font-18-B">{{ info.score }}</span>
        </div>
        <div class="card-info flex-between flex-column">
          <div class="flex flex-align-items-center">
            <p class="card-name font-20-B">{{ info.influencer.name }}</p>
            <p class="card-country flex flex-align-items-center">
              <i class="iconfont icon-weizhi"></i>
              <span class="font-14">{{ info.influencer.country }}</span>
            </p>
          </div>
          <div class="card-data flex">
            <div class="data-item">
              <p class="font-18-B">{{ numConvert(info.fansNum, 2) }}</p>
              <p class="font-14">粉丝数</p>
            </div>
            <div class="data-item">
              <p class="font-18-B">{{ numConvert(info.avgPlayNum, 2) }}</p>
              <p class="font-14">平均观看量</p>
            </div>
            <div class="data-item">
              <p class="font-18-B">{{ info.avgInteractRate }}</p>
              <p class="font-14">平均互动率</p>
            </div>
          </div>
        </div>
      </div>
      <div class="right flex">
        <el-tooltip content="发送邮件" placement="top" effect="light">
          <p class="item-btn flex-center flex-align-items-center pointer" @click="toPath(`/writeEmail?id=1`)">
            <i class="iconfont icon-a-youjian5"></i>
          </p>
        </el-tooltip>
        <el-tooltip content="邮件往来" placement="top" effect="light">
          <p class="item-btn flex-center flex-align-items-center pointer" @click="toPath(`/blogMail?id=1`)">
            <i class="iconfont icon-laiwangyoujian"></i>
          </p>
        </el-tooltip>
        <el-tooltip content="合作金额" placement="top" effect="light">
          <p class="item-btn flex-center flex-align-items-center pointer" @click="cooperationAmountShow = true">
            <i class="iconfont icon-jine"></i>
          </p>
        </el-tooltip>
        <el-tooltip content="备注" placement="top" effect="light">
          <p class="item-btn flex-center flex-align-items-center pointer" @click="addRemarkShow = true">
            <i class="iconfont icon-xinzengjihua"></i>
          </p>
        </el-tooltip>
        <el-dropdown :hide-on-click="false" trigger="hover" @command="handleCommand">
          <p class="item-btn flex-center flex-align-items-center pointer">
            <i class="iconfont icon-gengduo"></i>
          </p>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="cancel">取消合作</el-dropdown-item>
              <el-dropdown-item v-if="!info.isBlacklist" command="addBlacklist">加入黑名单</el-dropdown-item>
              <el-dropdown-item v-if="info.isBlacklist" command="removeBlacklist">取消黑名单</el-dropdown-item>
              <el-dropdown-item command="remove">移除红人</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <div class="content-card">
      <p class="card-title flex flex-align-items-center">合作内容</p>
      <div class="card-op flex-between flex-align-items-center">
        <el-select class="op-left">
          <el-option v-for="item in proList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <div class="op-right flex-center flex-align-items-center pointer" @click="addCooperateShow = true">
          <i class="iconfont icon-jiahao"></i>
          <span class="font-16">添加合作</span>
        </div>
      </div>
      <div class="list">
        <div v-for="(item, index) in list" :key="item.id" class="item flex-between flex-align-items-center">
          <div class="col1 flex flex-align-items-center">
            <img :src="item.img">
            <p class="font-16-B">{{ item.proName }}</p>
          </div>
          <div class="col2 flex">
            <div class="column">
              <p class="column-title font-12">视频</p>
              <div v-if="item.video" class="column-main flex flex-align-items-center">
                <img v-if="item.video.img" :src="item.video.img" class="column-img">
                <img v-else src="@/assets/no-img.png" class="column-img">
                <div class="column-time">
                  <p class="column-time-value font-14">{{ item.video.time || '-' }}</p>
                  <p class="column-time-label font-12">上线日期</p>
                </div>
                <div class="column-url">
                  <div class="column-url-top flex flex-align-items-center">
                    <a :href="item.video.url" target="_blank" class="font-14 ellipsis-1">{{ item.video.url }}</a>
                    <p class="pointer flex flex-align-items-center" @click="copy(item.video.url)">
                      <img src="@/assets/link2.png" class="copy">
                      <img src="@/assets/link.png" class="copy-hover">
                    </p>
                  </div>
                  <div class="column-url-bottom font-12">视频链接</div>
                </div>
              </div>
              <div v-else class="column-add flex flex-align-items-center pointer" @click="addUrlHandle(index)">
                <i class="iconfont icon-jiahao"></i>
                <span class="font-16">添加视频监控</span>
              </div>
              <div v-if="item.data" class="column-data flex">
                <p class="flex-center font-12">观看量：{{ numConvert(item.data.num) }}</p>
                <p class="flex-center font-12">点赞量：{{ numConvert(item.data.num) }}</p>
                <p class="flex-center font-12">评论量：{{ numConvert(item.data.num) }}</p>
                <p class="flex-center font-12">互动率：{{ item.data.rate }}</p>
              </div>
              <p v-else class="column-desc font-12">视频监控数据请于次日查看</p>
            </div>
            <div v-if="item.link" class="column">
              <p class="column-title font-12">追踪短链</p>
              <div class="column-main flex">
                <div class="column-url">
                  <div class="column-url-top flex flex-align-items-center">
                    <a :href="item.link.url" target="_blank" class="font-14 ellipsis-1">{{ item.link.url }}</a>
                    <p class="pointer flex flex-align-items-center" @click="copy(item.link.url)">
                      <img src="@/assets/link2.png" class="copy">
                      <img src="@/assets/link.png" class="copy-hover">
                    </p>
                  </div>
                </div>
              </div>
              <p class="column-desc font-12">追踪链接监控数据请于次日查看</p>
            </div>
            <div v-else style="flex:1;min-width: 200px;"></div>
          </div>
          <div class="col3 flex-center flex-align-items-center">
            <i class="iconfont icon-shanchu pointer" @click="delHanlder(item)"></i>
          </div>
        </div>
      </div>

      <div v-if="form.total > 0" class="pagination flex">
        <el-pagination :page-sizes="[10, 20, 50, 100]" layout="prev, pager, next, total" :total="form.total" />
      </div>
    </div>
  </div>

  <cooperation-amount v-if="cooperationAmountShow" @close="cooperationAmountShow = false"></cooperation-amount>
  <add-remark v-if="addRemarkShow" @close="addRemarkShow = false"></add-remark>
  <add-black-list v-if="addBlackListShow" @close="addBlackListShow = false"></add-black-list>
  <add-cooperate v-if="addCooperateShow" @change="cooperateChange" @close="addCooperateShow = false"></add-cooperate>
  <add-video-url v-if="addVideoUrlInfo.show" @change="videoUrlChange"
    @close="addVideoUrlInfo.show = false"></add-video-url>
</template>

<script setup>
import CooperationAmount from './components/cooperationAmount.vue';
import AddRemark from './components/addRemark.vue';
import AddBlackList from './components/addBlackList.vue';
import AddCooperate from './components/addCooperate.vue';
import AddVideoUrl from './components/addVideoUrl.vue';
import { ref, onMounted } from 'vue';
import api from '@/api/index.js';
import numConvert from '@/js/numConvert.js';
import { ElMessageBox, ElMessage } from 'element-plus';
import clipboard3 from 'vue-clipboard3';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
const { toClipboard } = clipboard3();

const stepList = [
  {
    desc: '阶段一',
    name: '确认合作',
    step: 1
  },
  {
    desc: '阶段二',
    name: '内容制作中',
    step: 2
  },
  {
    desc: '阶段三',
    name: '待上线',
    step: 3
  },
  {
    desc: '阶段四',
    name: '合作完成',
    step: 4
  }
];

const cooperationAmountShow = ref(false);
const addRemarkShow = ref(false);
const addBlackListShow = ref(false);
const addCooperateShow = ref(false);
const addVideoUrlInfo = ref({});
const info = ref({
  influencer: {}
});
const form = ref({
  total: 100
});
const proList = ref([
  {
    id: 1,
    name: 'xxxxx'
  }
]);
const list = ref([
  {
    id: 1,
    img: 'https://img-cdn.wotokol.com/images/1/avatar/A887E769EF241112546280E76ADC5E1DABD81159BA3F7F78C66642399B70D4A9BF0B0133836B1FFEB8FFA92C86FC2BC5719BCF018FB288987DCA9F34ADC08E03E4C7452842BC4ADD30B541D8A4498B59D12548C751C100DE5CD7FAB0212D591B18DCF011A2AE3A08ECD6E45B0ADF76E8.jpg',
    proName: 'xxxx',
    video: {
      time: '2023-12-22',
      url: 'xxxxxxx'
    },
    link: {
      url: 'xxxxxxx'
    },
    data: {
      num: 11111,
      rate: '5%'
    }
  },
  {
    id: 2,
    img: 'https://img-cdn.wotokol.com/images/1/avatar/A887E769EF241112546280E76ADC5E1DABD81159BA3F7F78C66642399B70D4A9BF0B0133836B1FFEB8FFA92C86FC2BC5719BCF018FB288987DCA9F34ADC08E03E4C7452842BC4ADD30B541D8A4498B59D12548C751C100DE5CD7FAB0212D591B18DCF011A2AE3A08ECD6E45B0ADF76E8.jpg',
    proName: 'xxxx'
  }
]);

// 红人进度详情接口
const queryScheduleDetail = () => {
  api.sensation.queryScheduleDetail({
    scheduleId: route.query.id
  }).then(res => {
    info.value = res;
  });
}
const handleCommand = e => {
  if (e === 'cancel') {
    cancelCooperate();
  }
  if (e === 'addBlacklist') {
    addBlackListShow.value = true;
  }
  if (e === 'removeBlacklist') { }
  if (e === 'remove') {
    removeSensation();
  }
}
const cancelCooperate = () => {
  ElMessageBox.confirm(
    '取消合作后，与该红人所有合作内容将被删除。请确认您的操作，这将无法恢复',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
    .then(() => {
    })
    .catch(() => {
    })
}
const removeSensation = () => {
  ElMessageBox.confirm(
    '移除红人后，与该红人所有合作内容将被删除。请确认您的操作，这将无法恢复',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
    .then(() => {
    })
    .catch(() => {
    })
}
const delHanlder = item => {
  ElMessageBox.confirm(
    '请确保该条合作内容尚未被发布， 因为一旦删除，追踪链接将无法再次绑定。请谨慎操作。',
    '删除合作内容',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
    .then(() => {
    })
    .catch(() => {
    })
}
const copy = async (e) => {
  try {
    await toClipboard(e);
    ElMessage.success('复制成功');
  } catch (error) {
    ElMessage.error('复制失败');
  }
};
const addUrlHandle = index => {
  addVideoUrlInfo.value = {
    show: true,
    index
  };
}
const videoUrlChange = e => {
  list.value[addVideoUrlInfo.value.index].video = {
    time: '2023-12-22',
    url: e
  }
  addVideoUrlInfo.value.show = false;
}
const cooperateChange = () => {
  addCooperateShow.value = false;
}
const toPath = url => {
  router.push(url);
}

onMounted(() => {
  queryScheduleDetail();
});
</script>

<style lang="less" scoped>
.main {
  padding: 24px 16px;
}

.step {
  margin-bottom: 16px;

  .left {
    width: 130px;
    height: 62px;
    line-height: 62px;
    color: #666;
    text-align: center;
    background: url(@/assets/stepbg1.svg) no-repeat;
  }

  .content {
    height: 62px;
    width: 255px;
    padding-left: 30px;
    padding-right: 36px;
    background: url(@/assets/setpbg2.svg) no-repeat;

    .content-left {
      p {
        &:first-child {
          color: #666;
          margin-bottom: 6px;
        }

        &:last-child {
          color: #333;
        }
      }
    }

    i {
      color: #dadada;
      font-size: 32px;

      &.active {
        color: @main-color;
      }
    }
  }
}

.bloger-card {
  border-radius: 20px;
  background: #fff;
  padding: 24px;
  margin-bottom: 16px;

  .left {
    .card-avatar {
      width: 100px;
      height: 100px;
      position: relative;
      margin-right: 16px;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }

      span {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 10;
        width: 100%;
        height: 50px;
        text-align: center;
        line-height: 50px;
        color: #fff;
      }
    }

    .card-info {
      .card-name {
        color: #333;
        margin-right: 8px;
      }

      .card-country {
        i {
          color: #d8d8d8;
          margin-right: 6px;
        }

        span {
          color: #666;
        }
      }

      .card-data {
        .data-item {
          width: 140px;
          height: 50px;
          border-left: 1px solid #ededed;
          padding-left: 18px;
          margin-right: 10px;

          p {
            &:first-child {
              color: #333;
              margin-bottom: 5px;
            }

            &:last-child {
              color: #999;
            }
          }
        }
      }
    }
  }

  .right {
    align-items: end;

    .item-btn {
      height: 50px;
      width: 50px;
      margin-left: 25px;
      background: #f8f8f8;
      border-radius: 14px;
      border: 1px solid #f8f8f8;

      &:hover {
        border-color: @main-color;

        i {
          color: @main-color;
        }
      }

      i {
        font-size: 24px;
        color: #999;
      }
    }
  }
}

.content-card {
  background-color: #fff;
  border-radius: 20px;
  padding: 16px;

  .card-title {
    color: #333;
    margin-bottom: 20px;

    &::before {
      content: "";
      width: 9px;
      height: 9px;
      margin-right: 6px;
      background: @main-color;
      border-radius: 5px;
    }
  }

  .card-op {
    margin-bottom: 15px;

    .op-left {
      width: 200px;
      height: 44px;

      &::v-deep {
        .el-input {
          width: 200px;
          height: 44px;
        }
      }
    }

    .op-right {
      width: 140px;
      height: 44px;
      background: linear-gradient(140deg, #a775ff, #ff5277);
      border-radius: 8px;

      i {
        color: #fff;
        margin-right: 10px;
      }

      span {
        color: #fff;
      }
    }
  }

  .list {
    .item {
      height: 184px;
      border-radius: 10px;
      border: 1px solid #f2f2f2;
      margin-bottom: 16px;
      padding-left: 32px;

      &:last-child {
        margin-bottom: 0;
      }

      .col1 {
        flex: 1;
        height: 152px;
        min-width: 471px;
        margin-right: 20px;

        img {
          width: 100px;
          height: 100px;
          border-radius: 10px;
          margin-right: 16px;
        }

        p {
          flex: 1;
          color: #333;
        }
      }

      .col2 {
        flex: 2;

        .column {
          background: #f9f9f9;
          border-radius: 10px;
          padding: 12px 15px;
          height: 152px;

          &:first-child {
            flex: 2;
            margin-right: 16px;
            min-width: 380px;
          }

          &:last-child {
            flex: 1;
            min-width: 200px;
          }

          .column-title {
            color: #999;
            margin-bottom: 15px;
          }

          .column-main {
            height: 50px;

            .column-img {
              background: #f4f4f4;
              width: 83px;
              height: 50px;
              border-radius: 8px;
              margin-right: 15px;
            }

            .column-time {
              margin-right: 36px;
              padding-top: 8px;

              .column-time-value {
                color: #333;
                margin-bottom: 5px;
              }

              .column-time-label {
                color: #999;
              }
            }

            .column-url {
              flex: 1;

              .column-url-top {
                a {
                  color: #333;
                  text-decoration: none;

                  &:hover {
                    color: @main-color;
                  }
                }

                p {
                  width: 16px;
                  height: 16px;
                  margin-left: 12px;

                  &:hover {
                    .copy {
                      display: none;
                    }

                    .copy-hover {
                      display: inline-block !important;
                    }
                  }

                  img {
                    width: 16px;
                    height: 16px;

                    &.copy-hover {
                      display: none;
                    }
                  }
                }
              }

              .column-url-bottom {
                color: #999;
                margin-top: 5px;
              }
            }
          }

          .column-add {
            height: 50px;

            i {
              color: @main-color;
              margin-right: 8px;
            }

            span {
              color: @main-color;
            }
          }

          .column-data {
            margin-top: 15px;
            padding-top: 10px;
            border-top: 1px solid #e5e6eb;

            p {
              flex: 1;
              color: #666;
              border-right: 1px solid #e5e6eb;

              &:last-child {
                border: none;
              }
            }
          }

          .column-desc {
            margin-top: 15px;
            padding-top: 10px;
            border-top: 1px solid #e5e6eb;
            color: #666;
          }
        }
      }

      .col3 {
        width: 100px;

        i {
          font-size: 30px;
          color: #999;
        }
      }
    }
  }

  .pagination {
    justify-content: end;
    margin-top: 16px;
  }
}
</style>
